<template>
  <div class="gedan">
    <nav>
      <span>热门标签:</span>
      <span class="tag" @click="checktag(index)" v-for="(item, index) in tag" :key="index">
        {{ item }}
        <span>|</span>
      </span>
    </nav>
    <div class="gedanMainm" ref="gedan">
      <Car :playlist="playlist" width="180px" height="235px" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import carList from "./catList.vue";
export default {
  data() {
    return {
      cat: "全部",
      playlist: [],
      tag: [
        "华语",
        "摇滚",
        "民谣",
        "电子",
        "另类/独立",
        "轻音乐",
        "综艺",
        "影视原声",
        "ACG"
      ],
      load: "",
      hight: "",
      page: 1,
      showlaoding: true
    };
  },
  components: {
    Car: carList
  },
  mounted() {
    this.ref && this.ref.addEventListener("scroll", this.windowScroll, true);
    this.load = this.$loading.show();
    this.init();
  },
  watch: {
    cat() {
      this.load = this.$loading.show();
      this.page = 1;
      this.init();
    }
  },
  computed: {
    ...mapState(["ref"])
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll, true);
  },
  methods: {
    init() {
      this.showlaoding = true;
      this.$api
        .playlist({ offset: (this.page - 1) * 50, cat: this.cat })
        .then(res => {
          this.playlist =
            this.page !== 1
              ? this.playlist.concat(res.playlists)
              : res.playlists;
          res.playlists.length
            ? (this.showlaoding = false)
            : (this.showlaoding = true);
          this.$nextTick(() => {
            this.hight = this.$refs.gedan.offsetHeight;
          });
          this.load.hide();
        });
    },
    checktag(index) {
      this.cat = this.tag[index];
    },
    windowScroll() {
      this.$nextTick(() => {
        let tpScrollTop = this.ref.scrollTop;
        if (!this.showlaoding) {
          if (tpScrollTop > this.hight * 0.8) {
            this.load = this.$loading.show();
            this.init((this.page += 1));
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.gedan {
  nav {
    height: inherit;
    margin: 10px 8px;
    color: #666566;
    .tag {
      font-size: 12px;
      cursor: pointer;
      margin-left: 5px;
    }
    span {
      &:last-child {
        margin: 0 5px;
      }
    }
    &:first-child {
      font-size: 13px;
      color: black;
    }
  }
  .gedanMain {
    display: flex;
    height: inherit;
    flex-wrap: wrap;
    .image-text {
      position: relative;
      width: 180px;
      height: 235px;
      margin-top: 10px;
      margin-bottom: 20px;
      margin-right: 20px;
      .play {
        width: 27px;
        height: 27px;
        position: absolute;
        right: 5px;
        bottom: 60px;
        display: none;
      }
      &:hover .play {
        display: inline;
      }
      .sub {
        position: absolute;
        bottom: 60px;
        left: 10px;

        font-size: 10px;
        a {
          color: white;
          margin-left: 10px;
        }
      }
      .xiaoren {
        width: 10px;
        height: 10px;
      }

      &:nth-child(4n) {
        margin-right: -20px;
      }
      &:nth-child(n > =5) {
        margin-top: 20px;
      }
      .bg {
        position: absolute;
        height: 20px;
        width: 180px;
        text-align: right;
        color: white;
        font-size: 11px;
        padding-right: 5px;
        background: linear-gradient(
          to left,
          rgba(100, 100, 100, 0.9),
          rgba(255, 255, 255, 0.1)
        );
        /* 标准的语法 */
        img {
          width: 15px;
          height: 15px;
          vertical-align: middle;
        }
      }

      .song_img {
        width: 180px;
        height: 180px;
        border: 1px solid black;
      }
      p {
        font-size: 14px;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}
</style>
